<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
          <FormItem label="订单单号" prop="orderId" disabled style=" -webkit-text-fill-color:black; ">
            <Input v-model="form.orderId" disabled style=" -webkit-text-fill-color:black; "/>
          </FormItem>
          <FormItem label="时间" prop="time">
            <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem label="应收金额" prop="totalPrice">
            <Input type="number" v-model.number="form.totalPrice" disabled style="  -webkit-text-fill-color:deeppink;"/>
          </FormItem>
          <FormItem label="优惠金额" prop="discountPrice">
            <Input type="number" :min="0" v-model.number="form.discountPrice" placeholder=0 @on-change="setreceivablePrice"/>
          </FormItem>
          <FormItem label="付款方式" prop="payment">
            <RadioGroup v-model="form.payment">
              <Radio aria-selected="true" label="现金"></Radio>
              <Radio label="支付宝"></Radio>
              <Radio label="微信"></Radio>
              <Radio label="银联"></Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="实收金额" prop="receivedPrice">
            <Input type="number" v-model.number="form.receivedPrice" disabled style="  -webkit-text-fill-color:red;" />
          </FormItem>
          <FormItem label="备注" prop="remarks">
            <Input v-model="form.remarks" />
          </FormItem>
          <FormItem label="顾客ID" prop="customerId">
            <Input v-model="form.customerId" />
          </FormItem>
          <FormItem label="收款人" prop="payee">
            <Input v-model="form.payee" />
          </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
  import { paymentApi } from '@/api/payment';
  import {orderApi} from '@/api/order';

  export default {
    name: 'PaymentListForm',
    components: {
    },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      // updateData: {
      //   type: Object
      // },
      addData: {
        type: Object
      }
    },
    data() {
      return {
        //表单数据
        form: {
         //收款时间
         time:null,
         //订单单号
         orderId:null,
         //应收金额
         totalPrice:null,
         //优惠金额
         discountPrice:null,
         //支付方式
         payment:null,
         //实收金额
         receivedPrice:null,
         //备注
         remarks:null,
         //顾客ID
         customerId:null,
         //收款人
         payee:null,
        },
        //表单验证
        formValidate: {
        //收款时间
        //time:[{ required: true, message: '请输入收款时间', trigger: 'blur' }],
        //订单单号
        //orderId:[{ required: true, message: '请输入订单单号', trigger: 'blur' }],
        //应收金额
        totalPrice:[{ type:'number',required: true, message: '请输入应收金额', trigger: 'blur' }],
        //优惠金额
        discountPrice:[{ type:'number',required: true, message: '请输入优惠金额', trigger: 'blur' }],
        //支付方式
        payment:[{ required: true, message: '请输入支付方式', trigger: 'blur' }],
        //实收金额
        receivedPrice:[{ type:'number',required: true, message: '请输入实收金额', trigger: 'blur' }],
        //备注
        remarks:[{ required: true, message: '请输入备注', trigger: 'blur' }],
        //顾客ID
        customerId:[{ required: true, message: '请输入顾客ID', trigger: 'blur' }],
        //收款人
        payee:[{ required: true, message: '请输入收款人', trigger: 'blur' }],
        }
      };
    },
  watch: {
      // updateData: function(newValue, oldValue) {
      //     this.$refs['form'].resetFields();
      //     if (this.isUpdate) {
      //         for (let k in this.form) {
      //             this.$set(this.form, k, newValue[k]);
      //         }
      //         this.$set(this.form, 'id', newValue['id']);
      //     }
      // },
      addData: function(newValue, oldValue) {
        this.$refs['form'].resetFields();
        if (this.isUpdate) {
          for (let k in this.form) {
            this.$set(this.form, k, newValue[k]);
          }
          this.$set(this.form, 'id', newValue['id']);
        }
      },
      isUpdate: function(newValue, oldValue) {
          if (!newValue) {
              this.resetForm();
              this.$refs['form'].resetFields();
          }
      }
  },
    created() {},
    mounted() {},
    methods: {
      setreceivablePrice() {
        this.form.receivedPrice = this.form.totalPrice - this.form.discountPrice
        // this.form.receivedPrice = "全部使用" + this.form.payment + "收费" + this.form.receivedPrice + "元"
      },
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           // if (this.isUpdate) {
            this.update();
           // } else {

             this.add();
           // }
         } else {
          this.$Message.error('参数验证错误，请仔细填写表单数据!');
         }
       });
      },
    resetForm() {
        this.form = {
          //收款时间
          time:null,
          //ID
          id:null,
          //订单单号
          orderId:null,
          //应收金额
          totalPrice:null,
          //优惠金额
          discountPrice:null,
          //支付方式
          payment:null,
          //实收金额
          receivedPrice:null,
          //备注
          remarks:null,
          //顾客ID
          customerId:null,
          //收款人
          payee:null,
        };
        this.$refs['form'].resetFields();
      },
      async add() {
        this.$Spin.show();
        let res = await paymentApi.addPayment(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
      // async update() {
      //   this.$Spin.show();
      //   let res = await paymentApi.updatePayment(this.form);
      //   this.$Message.success(res.msg);
      //   this.$Spin.hide();
      //   this.resetForm();
      //   this.$emit('on-form-close');
      // }
      async update() {
        let res = await orderApi.updateOrder(this.form);
        this.$Message.success(res.msg);

      },
    }
  };
</script>
